<template>
    <PageWrapper dense fixedHeight style="background-color: #fff;">
        <div style="background-color: #fff;overflow:hidden;min-height:400px;">
            <a-alert message="请先选择字典分类,才能查询指定分类的字典项。" type="info" show-icon style="margin:10px;padding:5px" />
            <div style="display: flex;">
                <DictCategoryIndex @select="handleSelect" :categorycode="searchInfo.ctgcode ? searchInfo.ctgcode : ''"
                class="w-3/7 xl:w-3/7" style="border-right: 1px solid #F3F3F3;" />
            <BasicTable @register="registerTable" :searchInfo="searchInfo" class="w-4/7 xl:w-4/7"
                style="padding-top:0;">
                <!-- 标记 -->
                <template #flag="{ record }">
                    <template v-if="record.flag == 0">
                        <Tag :color="'green'">启用</Tag>
                    </template>
                    <template v-if="record.flag == 5">
                        <Tag :color="'yellow'">禁用</Tag>
                    </template>
                    <template v-if="record.flag == 9">
                        <Tag :color="'red'">已删除</Tag>
                    </template>
                </template>
                <template #toolbar>
                    <a-button type="primary" @click="onAddItemButtonClick">新增字典项</a-button>
                </template>
                <template #action="{ column, record }">
                    <TableAction :actions="[
                        {
                            icon: 'clarity:note-edit-line',
                            tooltip: '编辑',
                            onClick: onEditItemButtonClick.bind(null, record),
                        },
                        {
                            icon: 'ant-design:delete-outlined',
                            color: 'error',
                            tooltip: '删除',
                            popConfirm: {
                                title: '是否确认删除',
                                placement: 'left',
                                confirm: onDeleteItemButtonClick.bind(null, record),
                            },
                        },
                    ]
                        " />
                </template>
            </BasicTable>
            </div>
        </div>
        <AddOrUpdateDictItem @register="registerAddOrUpdateItemForm" @success="afterSuccess" />
    </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, reactive, } from 'vue';
import { itemTableColumns, categoryItemConditionFormSchema } from './dict.data'
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
import { getCategoryItems, deleteItem } from '/@/api/platform/dict';
//使用modal弹出窗口
import { useModal } from '/@/components/Modal';
import { QcUnifyTransToChildProps } from '/#/QcUnify';
import { OperationTypeEnum } from '/@/enums/appEnum';
import AddOrUpdateDictItem from './AddOrUpdateDictItem.vue';
import { PageWrapper } from '/@/components/Page';
import DictCategoryIndex from './DictCategoryIndex.vue';
import { Tag, message } from 'ant-design-vue';
import { DictItemDto } from '/@/api/platform/model/dictModel';
export default defineComponent({
    name: 'DictItemIndex',
    components: {
        BasicTable,
        PageWrapper,
        DictCategoryIndex,
        AddOrUpdateDictItem,
        TableAction,
        Tag,
    },
    setup() {
        const searchInfo = reactive<Recordable>({});
        const [registerAddOrUpdateItemForm, { openModal: openAddOrUpdateForm }] = useModal();
        const [registerTable, { reload, setTableData }] = useTable({
            title: '字典项管理',
            api: getCategoryItems,
            rowKey: 'id',
            columns: itemTableColumns,
            formConfig: {
                labelWidth: 50,
                schemas: categoryItemConditionFormSchema,
                autoSubmitOnEnter: true,
                showResetButton: false,//查询条件部分中是否显示重置按钮
                compact: true, //紧凑型表单减少mariginBottom
            },
            ellipsis: false,
            canResize: true,
            useSearchForm: true,
            immediate: false,
            bordered: true,
            striped: false,
            showTableSetting: false,
            indexColumnProps: {
                width: 50
            },
            beforeFetch: (data) => {
                if (!searchInfo.ctgcode || searchInfo.ctgcode == '') {
                    message.error('请先选择字典分类');
                    return;
                } else {
                    return data;
                }
            },
            actionColumn: {
                width: 80,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
                fixed: 'right', //表格操作列是否固定，不设置时默认固定在右侧
            },
        });

        /**
         * 打开新增窗口,将左侧选中的分组传过去
         */
        function onAddItemButtonClick() {
            //构造父组件给子组件传值对象
            let propsData: QcUnifyTransToChildProps = {
                moduleName: '字典项管理',
                operateType: OperationTypeEnum.ADD,
                categorycode: searchInfo.ctgcode
            };
            openAddOrUpdateForm(true, propsData);
        }
        /**
         * 打开编辑窗口
         * @param record 
         */
        function onEditItemButtonClick(record: DictItemDto) {
            //构造父组件给子组件传值对象
            let propsData: QcUnifyTransToChildProps = {
                moduleName: '字典项管理',
                operateType: OperationTypeEnum.EDIT,
                dataId: record.id,
            };
            openAddOrUpdateForm(true, propsData);
        }

        /**
         * 删除参数项
         * @param record 
         */
        function onDeleteItemButtonClick(record: DictItemDto) {
            deleteItem(record.id)
                .then((res) => {
                    console.log('res', res);
                    //res判断结果：同时==undefined和null
                    if (res == undefined && (res == null || Object.keys(res).length == 0)) {
                        createMessage.success('删除成功。', 2);
                        reload();
                    }
                })
                .catch((ex) => {
                    console.log('catch ', ex);
                    createMessage.error(ex.msg);
                });
        }

        /**
         * 点击分组获取分组id
         * @param categorycode 分组id
         */
        async function handleSelect(categorycode = '') {
            // 若不判断,在取消选择时,会提示请求携带分组编码不能为空的错误,所以直接将表格数据设置为空(默认),并return出去,不发送请求
            if (categorycode === '') {
                searchInfo.ctgcode = ""
                setTableData([]);
                return;
            }
            searchInfo.ctgcode = categorycode;
            reload();
        }
        /**
         * 新增/编辑弹窗确认操作之后刷新页面
         */
        function afterSuccess(categorycode) {
            handleSelect(categorycode);
        }
        return {
            registerAddOrUpdateItemForm,
            registerTable,
            searchInfo,
            onAddItemButtonClick,
            afterSuccess,
            handleSelect,
            onDeleteItemButtonClick,
            onEditItemButtonClick
        }
    }
})
</script>